<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>帖子列表</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
</head>
<body style="background: #f2f2f2;">
<div th:insert="~{common/header::header1}"></div>
<div class="container">
    <div class="row">
        <div class="col-md-9 blog-main">
            <h6 class="border-bottom border-gray pb-2 mb-0">
                帖子累计：
                <span th:text="${pageInfo.getTotal()}"></span>
            </h6>
            <div th:each="topic:${pageInfo.list}" class="media text-muted pt-3" style="border: red;border-radius: 5px;border-width: 2px">
                <!-- 标题 -->
                <h1>
                    <a th:text="${topic.getTopicTitle()}"
                       th:href="@{'/topic-info/read.do?id='+${topic.getTopicId()}}">
                    </a>
                </h1>

                <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
                     <span th:text="${topic.getLoginName()}"
                           class="badge badge-light float-right">
                    </span>
                    <!-- 时间 -->
                    时间：
                    <span th:text="${#dates.format(topic.getCreateTime(),'yyyy-MM-dd HH:mm')}"
                          class="badge badge-light float-right">
                    </span>
                    浏览：
                    <span th:text="${topic.getTopicViews()}"
                          class="badge badge-light float-right">
                    </span>
                    板块：
                    <a th:text="${topic.getTopicTypeName()}"
                       th:href="@{'/blog/read/'+${topic.getTopicId()}}">
                    </a>
                </p>
            </div>

            <!--分页-->
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" th:href="@{/topic-info/showList(pn=)}">首页</a></li>
                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                        <a class="page-link" th:href="@{/topic-info/showList(pn=${pageInfo.pageNum - 1})}">Previous</a>
                    </li>
                    <li th:each="pageNum:${pageInfo.navigatepageNums}">
                        <a th:if="${pageNum==pageInfo.pageNum}" class="page-link" th:href="@{#}" th:text="${pageNum}"></a>
                        <a th:if="${pageNum!=pageInfo.pageNum}" class="page-link" th:href="@{/topic-info/showList(pn=${pageNum})}" th:text="${pageNum}"></a>
                    </li>
                    <li class="page-item" th:if="${pageInfo.hasNextPage}">
                        <a class="page-link" th:href="@{/topic-info/showList(pn=${pageInfo.pageNum+1})}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:href="@{/topic-info/showList(pn=${pageInfo.pages})}">尾页</a>
                    </li>
                </ul>
            </nav>
        </div>

        <aside class="col-md-3 blog-sidebar">

            <div class="my-3 rounded">
                <p class="mb-0">
                    <a th:href="@{/topic-info/toInput.do}" class="btn btn-primary btn-sm btn-block" style="color: white">发布帖子</a>
                </p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <p class="mb-0"> 论坛公约: <br> 禁止瞎水帖子，内容尽量有实际意义，禁止任何形式的广告，违者暂停账号使用!</p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <a th:href="@{'/topic-info/showListType?id='+${category.getTypeId()}}"
                   th:each="category:${categoryList}" th:text="${category.getTypeName()}"
                   class="badge badge-pill badge-primary mr-1"></a>
            </div>

        </aside>

    </div>

</div>>



<!--<a class="to-top">返回顶部</a>-->
<script th:src="@{/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/jquery/toTop.js}"></script>


<script>

</script>

</body>
</html>